<template>
	<view :class="['index',!show?'end':'']">
		<view class="title f-36 f-w">
			抽签活动须知
		</view>
		<scroll-view class="content f-28" scroll-y="true">
			{{detail.lottery_goods_describe}}
		</scroll-view>
		<button type="default" :class="['btn m-top50 ',statusText!='立即购买'&&statusText!='报名抽签'?'gary':'']" @click="submit">{{statusText}}</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,

			}
		},
		props:{
			detail: {
				type: Object,
				default: null
			}
		},
		computed:{
				// 0是活动时间内不可点，1是可点，2是开始前，3是结束后
				// active_status
				// 21代表抽签开始前，
				// 22代表抽签中(用户没报名抽签)，
				// 23代表用户等待抽签结果，
				// 24代表抽中(抢购开始前)
				// 25代表没抽中(抢购开始前)，
				// 26代表抽中(抢购中) 
				// 27代表没抽中(抢购中) 
			statusText(){
				if(this.detail.active_status<20 && this.detail.is_first){
					return '立即购买'
				}else{
					switch(this.detail.active_status){
						case 0:
						    return ''
						case 1:
						    return '立即购买'
						case 2:
						    return '活动未开始'
						case 3:
						    return '活动已结束'
						case 21:
						    return '抽签未开始'
						case 22:
						    return '报名抽签'
					    case 23:
					        return this.detail.forestall_start_time > this.detail.now_time ? '待开奖':'开奖中'
					    case 24:
					        return '立即购买'
						case 25:
						    return '未中签'
						case 26:
						    return '立即购买'
						case 27:
						    return '未中签'
					    default:
					        return '立即购买'
					}
				}
				
			}
		},
		mounted() {
			// this.detail.active_status=23
		},
		methods: {
			submit(){
				this.show=false
				if(this.detail.active_status<20 && this.detail.is_first){
					this.$emit('submit',1)
				}else{
					switch(this.detail.active_status){
						case 1:
						    this.$emit('submit',1)
							break
						case 22:
							this.$emit('submit',22)
							break
						case 26:
							this.$emit('submit',26)
							break
					    default:
							return
					}
				}
			}
		}
	}
</script>

<style scoped>
	.index{
		width: calc(100% - 48rpx);
		max-height: 50%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 24rpx;
		background-color: #1c1c1c;
		z-index: 999;
		display: flex;
		flex-direction: column;
		/* padding-top: 150rpx; */
	}
	.title{
		color: #FEEAD6;
		margin-bottom: 24rpx;
	}
	.content{
		width: calc(100% - 40rpx);
		max-height: 400rpx;
		color: #fff;
		padding: 12rpx 20rpx;
		border-radius: 30rpx;
		background-color: #262525;
		/* flex: 1; */
	}
	.btn{
		width: 100%;
		background-color: #FDEAD6;
	}
	.gary{
		/* color: #fff; */
		background-color: #ddd;
	}
	.end{
		animation: end 1s;
		animation-fill-mode:forwards;
	}
	@keyframes end {
		from {
			bottom: 0%;
		}
		to {
			bottom: -80%;
		}
	}
</style>
